<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Example</title>
    <script>
        // 创建 WebSocket 对象并处理连接、消息、错误等事件
        window.onload = function() {
            const socket = new WebSocket(`ws://localhost:8888/api/websocket`); // 替换为你的 WebSocket 服务器地址

            // 监听 WebSocket 连接成功事件
            socket.addEventListener('open', function(event) {
                console.log('WebSocket connected.');

                // 发送消息到服务器示例
                socket.send('Hello Server!');
                socket.send(JSON.stringify({
                     orderNo:12
                }));

            });

            // 监听 WebSocket 接收到消息事件
            socket.addEventListener('message', function(event) {
                console.log('Message from server:', event.data);
                // 在页面上显示接收到的消息
                const messageElement = document.getElementById('messages');
                messageElement.textContent += '\n' + event.data;
            });

            // 监听 WebSocket 错误事件
            socket.addEventListener('error', function(event) {
                console.error('WebSocket error:', event);
            });

            // 监听 WebSocket 关闭事件
            socket.addEventListener('close', function(event) {
                console.log('WebSocket closed:', event);
            });
        }

        // 示例：发送消息到服务器
    </script>
</head>
<body>
<h1>WebSocket Example</h1>
<div>
    <textarea id="messages" rows="10" cols="50" readonly></textarea>
</div>
<div>
    <input type="text" id="messageInput" placeholder="Type your message...">
    <button onclick="sendMessage()">Send</button>
</div>
</body>
</html>